<script setup lang="ts">
import { ref} from "vue";
import { ElNotification } from 'element-plus';
import { useSlotManagementStore } from '@/store/slot_mangement';
import useoutbound from '@/hooks/slot_management/slot_outbound'
import success_wav from '@/assets/success.wav'; // 导入音频文件
import fail_wav from '@/assets/fail.wav';

//@ts-ignore
import { throttle } from 'lodash';

const SlotManagementStore = useSlotManagementStore();




const {
    handgetoutbound,
    handaddoutbound,
} = useoutbound()



let screenHeight = ref(window.innerHeight - 260);
window.addEventListener('resize', function () {
    screenHeight.value = window.innerHeight - 260;
});

// 刷新 节流函数
const throttleoutbound = throttle(() => handgetoutbound(), 3000, {
    leading: true, // 第一次触发立即执行
    trailing: false // 最后一次触发不执行
});



const successAudio = ref(); // 成功音乐
const failAudio = ref(); // 失败音乐

function playSuccessAudio() {
    successAudio.value.play();
}

function playFailAudio() {
    failAudio.value.play();
}

// 出库
let conCaseNo=ref<string>('');
async function handaddoutboundvue(hconCaseNo:string) {
   let res=await handaddoutbound(hconCaseNo.trim());
   if (res === 'ok') {
    playSuccessAudio(); // 出库成功播放音乐
     conCaseNo.value='';  // 把input框清空
   } else if (res === 'no') {
    ElNotification({
                title: 'Error',
                message: '当前表格中不存在该合同箱号，请刷新后重试',
                type: 'error',
            })
     playFailAudio();
     conCaseNo.value='';
   }else {
     ElNotification({
                title: 'Error',
                message: '出库失败，请联系管理员',
                type: 'error',
            })
            playFailAudio();
     conCaseNo.value='';
   }

}

</script>

<template>
    <audio ref="successAudio" :src="success_wav" preload="auto" :controls="false"></audio>
    <audio ref="failAudio" :src="fail_wav" preload="auto" :controls="false"></audio>
    <el-card>
        <el-form @submit.native.prevent class="form" :inline="true">
            <el-form-item>
                <el-button type="primary" @click="throttleoutbound" v-has="`btn_outbound_refresh`"
                    style="margin-left: 15px;">刷新</el-button>
            </el-form-item>

            <el-form-item>
                <el-input  v-model="conCaseNo" @keydown.enter="handaddoutboundvue(conCaseNo)" placeholder="请输入合同号箱号按回车键出库" v-has="`input_outbound_concase`"></el-input>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card>
        <el-scrollbar :height="screenHeight"> <!-- 菜单滚动条 -->
            <el-table :data="SlotManagementStore.locationtableData_pinia2" :height="screenHeight" style="width: 100%">
                <el-table-column prop="ConCaseNo" label="合同箱号"></el-table-column>
                <el-table-column prop="ContractNo" label="合同号"></el-table-column>
                <el-table-column prop="CaseNo" label="箱号"></el-table-column>
                <el-table-column prop="Size" label="尺寸"></el-table-column>
                <el-table-column prop="CasingType" label="包装类型"></el-table-column>
                <el-table-column prop="PackageType_C" label="包装材质"></el-table-column>
                <el-table-column prop="LocationID" label="货位"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handaddoutboundvue(scope.row.ConCaseNo)" v-has="`btn_outbound_outbound`">出库</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </el-card>
</template>

<style lang="css" scoped>

</style>